<template>
  <view>
    <cu-custom bgColor="bg-gradual-pink" :isBack="false">
      <template v-slot:content>消息</template>
      <template v-slot:right>
        <view class="action" @click="markAllAsRead">
          <text class="cuIcon-read"></text>
          <text>一键已读</text>
        </view>
      </template>
    </cu-custom>

    <view class="cu-list menu-avatar">
      <!-- 平台消息 -->
      <view class="cu-bar bg-white solid-bottom" v-if="platformMsg">
        <view class="action">
          <text class="cuIcon-title text-orange"></text> 平台消息
        </view>
      </view>
      <view
        class="cu-item"
        v-if="platformMsg"
        @longpress="showDeleteConfirm('platform', 0)"
      >
        <view
          class="cu-avatar round lg"
          :style="'background-image:url(' + platformMsg.image + ')'"
        >
          <view class="cu-tag badge" v-if="platformMsg.unread"></view>
        </view>
        <view class="content">
          <view class="text-grey">{{ platformMsg.title }}</view>
          <view class="text-gray text-sm text-cut">
            {{ platformMsg.content }}
          </view>
        </view>
        <view class="action">
          <view class="text-grey text-xs">{{ platformMsg.time }}</view>
        </view>
      </view>

      <!-- 聊天动态 -->
      <view
        class="cu-bar bg-white solid-bottom margin-top-sm"
        v-if="chatMsgList.length || true"
      >
        <view class="action">
          <text class="cuIcon-title text-blue"></text> 聊天动态
        </view>
      </view>
      <!-- 平台客服入口 -->
      <view class="cu-item" @click="goToKefuChat">
        <view
          class="cu-avatar round lg"
          style="background-image: url('/static/images/kefu.png')"
        >
          <view class="cu-tag badge" v-if="kefuUnread"></view>
        </view>
        <view class="content">
          <view class="text-grey">平台客服</view>
          <view class="text-gray text-sm text-cut">点击联系平台客服</view>
        </view>
        <view class="action">
          <view class="text-grey text-xs">在线</view>
        </view>
      </view>
      <view
        class="cu-item"
        v-for="(item, index) in chatMsgList"
        :key="'chat-' + index"
        @longpress="showDeleteConfirm('chat', index)"
      >
        <view
          class="cu-avatar round lg"
          :style="'background-image:url(' + item.image + ')'"
        >
          <view class="cu-tag badge" v-if="item.unread"></view>
        </view>
        <view class="content">
          <view class="text-grey">
            {{ item.shopName }}
            <text class="text-xs text-red">[{{ item.tag }}]</text>
          </view>
          <view class="text-gray text-sm text-cut">
            {{ item.content }}
          </view>
        </view>
        <view class="action">
          <view class="text-grey text-xs">{{ item.time }}</view>
        </view>
      </view>

      <!-- 两周前的消息 -->
      <view
        class="cu-bar bg-white solid-bottom margin-top-sm"
        v-if="historyMsgList.length"
      >
        <view class="action">
          <text class="cuIcon-title text-gray"></text> 两周前的消息
        </view>
      </view>
      <view
        class="cu-item"
        v-for="(item, index) in historyMsgList"
        :key="'history-' + index"
        @longpress="showDeleteConfirm('history', index)"
      >
        <view
          class="cu-avatar round lg"
          :style="'background-image:url(' + item.image + ')'"
        >
          <view class="cu-tag badge" v-if="item.unread"></view>
        </view>
        <view class="content">
          <view class="text-grey">{{ item.title }}</view>
          <view class="text-gray text-sm text-cut">
            {{ item.content }}
          </view>
        </view>
        <view class="action">
          <view class="text-grey text-xs">{{ item.time }}</view>
        </view>
      </view>
    </view>

    <!-- 空状态提示 -->
    <view
      class="empty-state"
      v-if="!platformMsg && !chatMsgList.length && !historyMsgList.length"
    >
      <view class="cu-empty">
        <text class="cuIcon-message text-gray" style="font-size: 80px"></text>
        <view class="text-gray margin-top-sm">暂无消息</view>
      </view>
    </view>
  </view>
</template>
<script setup>
import { ref } from "vue";

// 平台消息（单条数据）
const platformMsg = ref({
  title: "订单已送达",
  content: "您的金鸡匠·新派烤鸡·意面·拌饭(恒大帝景...)",
  time: "2025/05/22",
  image: "/static/images/shop1.png",
  unread: true, // 未读状态
});

// 聊天动态（列表数据）
const chatMsgList = ref([
  {
    shopName: "不可炸鸡·CHEESE·黄油芝士炸鸡...",
    tag: "商品券",
    content: "超抢手，最低6.4折的特惠商品券限...",
    time: "昨天",
    image: "/static/images/shop2.png",
    unread: true,
  },
]);

// 两周前的消息（列表数据）
const historyMsgList = ref([
  {
    title: "金鸡匠·新派烤鸡·意面·拌...",
    content: "[评价有礼]",
    time: "2025/05/22",
    image: "/static/images/shop1.png",
    unread: false,
  },
  {
    title: "不可炸鸡·CHEESE·黄油芝...",
    content: "[邀请评价]",
    time: "2025/04/18",
    image: "/static/images/shop2.png",
    unread: false,
  },
  {
    title: "骑手张运汀",
    content: "[卡片消息]",
    time: "2025/04/10",
    image: "/static/images/rider1.png",
    unread: true,
  },
  {
    title: "沪上阿姨·精选茶饮(厦门湖...)",
    content: "诚邀收藏店铺粉丝入群",
    time: "2025/03/28",
    image: "/static/images/shop3.png",
    unread: false,
  },
  {
    title: "骑手王俊健",
    content: "骑士: [图片]",
    time: "2025/03/21",
    image: "/static/images/rider1.png",
    unread: false,
  },
  {
    title: "嘎嘎好吃东北老饭盒(集美店)",
    content: "诚邀收藏店铺粉丝入群",
    time: "2025/03/19",
    image: "/static/images/shop4.png",
    unread: true,
  },
]);

// 平台客服未读状态（如需动态可自行扩展）
const kefuUnread = ref(false);

// 标记所有未读消息为已读
const markAllAsRead = () => {
  // 标记平台消息为已读
  if (platformMsg.value?.unread) {
    platformMsg.value.unread = false;
  }

  // 标记聊天动态为已读
  chatMsgList.value.forEach((item) => {
    if (item.unread) item.unread = false;
  });

  // 标记历史消息为已读
  historyMsgList.value.forEach((item) => {
    if (item.unread) item.unread = false;
  });

  uni.showToast({
    title: "已全部标为已读",
    icon: "none",
  });
};

// 长按显示删除确认
const showDeleteConfirm = (type, index) => {
  uni.showActionSheet({
    itemList: ["删除"],
    success: (res) => {
      if (res.tapIndex === 0) {
        // 用户点击了删除
        deleteMessage(type, index);
      }
    },
  });
};

// 删除单条消息
const deleteMessage = (type, index) => {
  switch (type) {
    case "platform":
      platformMsg.value = null;
      break;
    case "chat":
      chatMsgList.value.splice(index, 1);
      break;
    case "history":
      historyMsgList.value.splice(index, 1);
      break;
  }
};

// 跳转到平台客服聊天
const goToKefuChat = () => {
  uni.navigateTo({ url: "/pages/index/chat" });
};
</script>
<style scoped>
.cu-list.menu-avatar > .cu-item .content {
  width: calc(100% - 96rpx - 120rpx);
}
</style>
